<template>
  <el-dialog
    class="archives-upload-file-modal"
    :title="`项目${projectType === '1' ? '新闻' : '公告'}`"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :visible="visible"
    :width="$setRem(900)"
    :before-close="handleCancel">
    <div class="content">
      <div class="btn-content">
        <el-button
          type="primary"
          size="small"
          @click="uploadVisible = true">
          上 传
        </el-button>
      </div>
      <el-table
        class="table-content"
        v-loading="loading"
        element-loading-custom-class="custom-load"
        :data="tableData"
        style="width: 100%">
        <el-table-column label="序号" type="index" width="120"></el-table-column>
        <el-table-column prop="modifyTime" label="时间"></el-table-column>
        <el-table-column
          :label="`${projectType === '1' ? '新闻' : '公告'}名称`"
          prop="projectTitel">
        </el-table-column>
        <el-table-column label="发布人" prop="publishName" width="120"></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <span class="download btn"  @click="hanldeDownload(scope.row)">下载</span>
            <span class="btn" @click="hanldeDelete(scope.row)">删除</span>
          </template>
        </el-table-column>
        <div class="empty-content" slot="empty">
          <i class="iconfont iconwushuju"></i>
          <p>暂无数据</p>
        </div>
      </el-table>
      <el-pagination
        v-if="total > 10"
        :page-size="pageSize"
        :current-page="pageNo"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      class="archives-upload-modal"
      append-to-body
      title="上传文件"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :visible="uploadVisible"
      :width="$setRem(500)"
      :before-close="handleClose">
      <div class="content">
        <div class="row">
          <span class="label">{{ `${projectType === '1' ? '新闻' : '公告'}名称` }}</span>
          <div class="input-content">
            <el-input placeholder="请输入" v-model="projectTitel"></el-input>
          </div>
        </div>
        <div class="row upload-row">
          <el-upload
            class="upload-project-file"
            ref="upload"
            action="#"
            :on-change="uploadChange"
            :file-list="fileList"
            :show-file-list="true"
            :auto-upload="false">
            <el-button :disabled="btnLoading" slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">取 消</el-button>
        <el-button
          class="success"
          type="primary"
          :loading="btnLoading"
          @click="handleSubmit">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    projectType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      btnLoading: false,
      uploadVisible: false,
      projectTitel: '',
      projectPath: '',
      // 上传文件
      fileList: []
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    },
    publishId() {
      return this.$store.state.userInfo.uuid;
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.getTableData();
        return;
      }
      this.clear();
    },
    uploadVisible(val) {
      if (!val) {
        this.projectTitel = '';
        this.fileList = [];
      }
    }
  },
  methods: {
    // 删除
    hanldeDelete(row = {}) {
      this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        const { success } = await this.$Model.deleteCommon({
          ids: row.id
        });
        if (success) {
          this.$emit('change', true);
          this.$message.success('删除成功');
          this.clear();
          this.getTableData();
        }
      });
    },
    // 下载文件
    hanldeDownload(row) {
      const { projectPath } = row;
      if (!projectPath) {
        this.$message.warning('文件失效！');
        return;
      }
      window.open(this.$checkUrl(projectPath));
    },
    uploadChange(file, fileList) {
      this.fileList = [file];
    },
    handleClose() {
      this.uploadVisible = false;
      this.btnLoading = false;
    },
    handleCancel() {
      this.clear();
      this.$emit('cancel', false);
    },
    clear() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableData = [];
      this.loading = false;
      this.btnLoading = false;
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    // 提交上传数据
    async handleSubmit() {
      if (!this.fileList.length) {
        return this.$message.warning('请上传文件');
      } else if (!this.projectTitel) {
        return this.$message.warning('请填写名称');
      }
      this.btnLoading = true;
      const fm = new FormData();
      const file = this.fileList[0];
      fm.append('file', file && file.raw);
      const { success, data: { data }} = await this.$Model.fileUpload(fm);
      if (success && data) {
        const result = await this.$Model.addCommon({
          projectId: this.projectId,
          projectPath: data,
          projectTitel: this.projectTitel,
          projectType: this.projectType,
          publishId: this.publishId
        });
        this.btnLoading = false;
        if (result.success) {
          this.$message.success('保存成功');
          this.getTableData();
          this.$emit('change', this.projectType);
          this.uploadVisible = false;
          return;
        }
        this.$Model.fileDelete({ filePath: data });
        return;
      }
      this.btnLoading = false;
    },
    // 获取列表数据
    async getTableData() {
      this.loading = true;
      const { success, data: { data }} = await this.$Model.getCommonList({
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        projectId: this.projectId,
        projectType: this.projectType
      });
      this.loading = false;
      if (success && data) {
        const { list, total } = data;
        this.tableData = list || [];
        this.total = total || 0;
      }
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/dialog';
  @import '../../../assets/styles/table';

  .archives-upload-file-modal {
    .content {
      width: 100%;
      height: 600px;
      .btn-content {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 20px;
        margin-bottom: 10px;
      }
      .btn {
        padding: 0 5px;
        cursor: pointer;
        color: $mainColor;
      }
      .table-content {
        width: 100%;
        height: calc(100% - 80px);
        overflow: hidden;
        /deep/ .el-table__body-wrapper {
          height: 100%;
          padding-bottom: 46px;
          overflow-y: auto;
        }
      }
      .row {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
        .label {
          width: 120px;
          color: $mainColor;
        }
        .input-content {
          width: 300px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .el-icon-plus {
            font-size: 20px;
            margin-left: 20px;
            cursor: pointer;
            &:hover {
              color: $mainColor;
            }
          }
        }
      }
    }
  }
  .archives-upload-modal {
    .content {
      width: 100%;
      min-height: 200px;
      padding: 20px;
      .row {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 30px;
        .label {
          width: 120px;
          text-align: center;
          color: $mainColor;
        }
        .input-content {
          flex: 1;
        }
        &.upload-row {
          padding-left: 120px;
          /deep/ .el-upload-list__item-name {
            color: $mainColor;
            width: 200px;
          }
        }
      }
    }
  }
</style>
